<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link href="../assets/css/bootstrap.css" rel="stylesheet" />
		<!-- FontAwesome Styles-->
		<link href="../assets/css/font-awesome.css" rel="stylesheet" />
		<link href="../css/pulic.css" rel="stylesheet"/>
		<!-- Google Fonts-->
		<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
		 <!-- TABLE STYLES-->
		<link href="../assets/js/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
		<link rel="stylesheet" href="../lay/css/layui.css" />
		<link href="../css/authority.css" rel="stylesheet" />
		<script src="../js/jquery-3.2.1/jquery-3.2.1.js"></script>
		<style>
			.row {
				text-align:center;
			}
		</style>
		<script type="text/javascript">
		//加载事件
		$(function(){
		var collection1 = $(".username");
		var collection2 = $(".role");
		$.each(collection1, function(){
			$(this).addClass("start");
			});
			$.each(collection2, function(){
			$(this).addClass("start");
			});
		});
		//点击事件
		function change1(dom){
			var collection1 = $(".username");
			$.each(collection1, function(){
				$(this).removeClass("end");
				$(this).addClass("start");
			});
			$(dom).removeClass("start");
			$(dom).addClass("end");
		}
		function change2(dom){
			var collection2 = $(".role");
			$.each(collection2, function(){
				$(this).removeClass("end");
				$(this).addClass("start");
			});
			$(dom).removeClass("start");
			$(dom).addClass("end");
		}

			//var times = 0;
			//function change(btn) {
			//btn.style.background = times % 2 == 0 ? '#b8b8b8' : '#3e3e3e';
			//btn.style.color = times % 2 == 0 ? '#f36a5a' : 'white';
			//times++;
		//}
  </script>
	</head>

	<body>

		
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"></fieldset>
 
<table style="width: 100%">
<tr>
	<td align="center">用户信息</td>
	<td align="center">用户角色</td>
	<td align="center">权限管理</td>
</tr>
<tr>
	<td align="center">
	<div style="display: inline-block; width: 350px; height: 350px; padding: 10px; border: 1px solid #ddd; overflow: auto;" class="user">
		<div><span class="username" onclick="change1(this)">1001&nbsp;张三&nbsp;财务部</span></div>
		<div><span class="username" onclick="change1(this)">1002&nbsp;李四&nbsp;研发部</span></div>
		<div><span class="username" onclick="change1(this)">1003&nbsp;王五&nbsp;人事部</span></div>
		<div><span class="username" onclick="change1(this)">1004&nbsp;赵六&nbsp;市场部</span></div>
		<div><span class="username" onclick="change1(this)">1005&nbsp;田七&nbsp;开发部</span></div>
		<div><span class="username" onclick="change1(this)">1006&nbsp;张三&nbsp;财务部</span></div>
		<div><span class="username" onclick="change1(this)">1007&nbsp;李四&nbsp;财务部</span></div>
		<div><span class="username" onclick="change1(this)">1008&nbsp;王五&nbsp;财务部</span></div>
		<div><span class="username" onclick="change1(this)">1009&nbsp;赵六&nbsp;财务部</span></div>
		<div><span class="username" onclick="change1(this)">10010&nbsp;田七&nbsp;财务部</span></div>
		<div><span class="username" onclick="change1(this)">10011&nbsp;张三&nbsp;财务部</span></div>
		<div><span class="username" onclick="change1(this)">10012&nbsp;李四&nbsp;财务部</span></div>
		<div><span class="username" onclick="change1(this)">10013&nbsp;王五&nbsp;财务部</span></div>
		<div><span class="username" onclick="change1(this)">10014&nbsp;赵六&nbsp;财务部</span></div>
		<div><span class="username" onclick="change1(this)">10015&nbsp;田七&nbsp;财务部</span></div>
	</div>
	</td>
	<td align="center">
	<div style="display: inline-block; width: 350px; height: 350px; padding: 10px; border: 1px solid #ddd; overflow: auto;"  class="user">
		<div><span class="role" onclick="change2(this)">经办人</span></div>
		<div><span class="role" onclick="change2(this)">付款人</span></div>
		<div><span class="role" onclick="change2(this)">管理员</span></div>
		<div><span class="role" onclick="change2(this)">财务</span></div>
		<div><span class="role" onclick="change2(this)">主管</span></div>
	</div>
	</td>
	<td>
	<div style="display: inline-block; width: 350px; height: 350px; padding: 10px; border: 1px solid #ddd; overflow: auto;">
		<ul id="demo1"></ul>
	</div>
	</td>
</tr>
</table>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">

</fieldset>

<div class="row" style="margin-left: 1%;">
	<form class="form-inline" >
		<div class="form-group">                      
			<input type="text" class="form-control" id="exampleInputName2" placeholder="请输入用户姓名">
        </div>
        <button type="submit" class="btn btn-info">搜索</button>
	</form>
</div>
		

		
		


		<script src="../layui.js" charset="utf-8"></script>
		<script>
//Demo
layui.use('tree', function(){
  

var tree = layui.tree({
					elem: '#demo1' //指定元素，生成的树放到哪个元素上
					,check: 'checkbox'//勾选风格
					,skin: 'as' //设定皮肤
					,drag: true//点击每一项时是否生成提示信息
					,checkboxName: 'aa[]'//复选框的name属性值
					,checkboxStyle: ""//设置复选框的样式，必须为字符串，css样式怎么写就怎么写
					,click: function(item) { //点击节点回调
						console.log("item");
					},
					onchange: function (){//当当前input发生变化后所执行的回调
						console.log(this);


    },
    nodes: [ //节点
      {
        name: '数据管理'
        ,id: 2
        ,spread: true
		//是否是展开状态，true为展开状态
        ,href: ""
        //设置节点跳转的链接，如果不设置则不会跳转
        ,target: "_self"
        //节点链接打开方式
        ,alias: 'changyong'
		,checkboxValue: 1
		//复选框的值
		,checked: true
         //复选框默认是否选中
        ,children: [
          {
            name: '个人工作信息'
            ,id: 21
			,spread: true
			,checkboxValue: 2
             //复选框的值
            ,checked: true
             //复选框默认是否选中
			,children: [
			  {
				name: '我的未办'
				,id: 211
				,checkboxValue: 3
                 //复选框的值
                ,checked: true
                 //复选框默认是否选中
			  }, {
				name: '我的待阅'
				,id: 212
				,checkboxValue: 4
                 //复选框的值
                ,checked: true
                 //复选框默认是否选中
			  }, {
				name: '我的已办'
				,id: 213
				,checkboxValue: 5
                 //复选框的值
                ,checked: true
                 //复选框默认是否选中
			  }, {
				name: '我的已阅'
				,id: 214
				,checkboxValue: 6
                 //复选框的值
                ,checked: true
                 //复选框默认是否选中
			  }
			]
          }, {
            name: '个人数据'
            ,id: 22
            ,spread: true
            ,checked: true
             //复选框默认是否选中
            ,children: [
			  {
				name: '个人专项总览'
				,id: 221
				,checkboxValue: 7
                 //复选框的值
                ,checked: true
                 //复选框默认是否选中
			  }, {
				name: '个人报销总览'
				,id: 222
				,checkboxValue: 8
                 //复选框的值
                ,checked: true
                 //复选框默认是否选中
			  }, {
				name: '个人差旅地图'
				,id: 223
				,checkboxValue: 9
                 //复选框的值
                ,checked: true
                 //复选框默认是否选中
			  }
			]
          }
        ]
	  },
	  {
		  name: '报账平台'
		  ,id: 3
		  ,spread: true
		  ,checked: true
             //复选框默认是否选中
		  ,children: [
		    {
			  name: '申请报账'
			  ,id: 31
			  ,checkboxValue: 10
               //复选框的值
              ,checked: true
               //复选框默认是否选中
		    }, {
			  name: '申报信息'
			  ,id: 32
			  ,checkboxValue: 11
               //复选框的值
              ,checked: true
               //复选框默认是否选中
			}
		  ]
	  },
	   {
		  name: '系统设置'
		  ,id: 4
		  ,spread: true
		  ,checked: true
             //复选框默认是否选中
		  ,children: [
		    {
			  name: '个人信息(管理员)'
			  ,id: 41
			  ,checkboxValue: 12
               //复选框的值
              ,checked: true
               //复选框默认是否选中
		    },{
			  name: '个人信息(非管理员)'
			 , id: 42
			  ,checkboxValue: 13
               //复选框的值
              ,checked: true
               //复选框默认是否选中
			},{
			  name: '权限设置'
			  ,id: 43
			  ,checkboxValue: 14
               //复选框的值
              ,checked: true
               //复选框默认是否选中
			}
		  ]
	  }
	  
	  ]
  });
  
  
 
 
 <!--  tree.render(); -->
  
});
</script>

	</body>

</html>